const getSelfComp = binding => {
  const { parentComp } = binding.value;
  const tooltipVm = parentComp.$refs.TooltipMultiRank;
  return tooltipVm;
};

const bindFun = (el, binding) => {
  el.onmouseenter = e => {
    const self = getSelfComp(binding);
    self.parentComp = binding.value.parentComp;
    self.config = binding.value.config;
    self.setState({ tooltipOnWid: self.parentComp.widgetInstanceId });

    self.vars = binding.value.vars;
    self.extVars = binding.value.extVars ? binding.value.extVars : {};

    // 已经加载过富文本
    if (self.hasLoadedRichText) {
      self._bindDirectiveOnmouseenter(self, binding, e);
    } else {
      self.richText = self.config.html;
      self.hasLoadedRichText = true;
      self._bindDirectiveOnmouseenter(self, binding, e);
    }
  };

  el.onmousemove = e => {
    const self = getSelfComp(binding);
    self.resetPosition(e, self);
  };

  el.onmouseleave = e => {
    const self = getSelfComp(binding);
    self.setState({ tooltipOnWid: '' });
    self.hideTip();
  };
};

if (!window.visualComp.directives['visual-tooltip-multi-rank']) {
  window.visualComp.directives.push('visual-tooltip-multi-rank');
  window.xVueWeb.app.directive('visual-tooltip-multi-rank', {
    beforeMount: bindFun,
    updated: bindFun,
    unmounted: el => {
      el.onmouseenter = null;
      el.onmousemove = null;
      el.onmouseleave = null;
    },
  });
}
